<template>
	<view class="container">
		<view class="app-title">我的预约状态</view>
		<view class="service-wrapper">
			<view class="service-header">
				<view :class="current === item.value ? 'header-active' : ''" v-for="(item, index) in serviceList"
					:key="index" @click="changeCurrent(item.value)">{{ item.label }}</view>
			</view>
			<view class="service-content" v-if="loading">
				<view class="service-item">
					<u-loading-icon mode="semicircle" text="加载中..."></u-loading-icon>
				</view>
			</view>
			<view class="service-content" v-else>
				<template v-if="list.length">
					<view class="service-item" v-for="(item, index) in list" :key="index" @click="jumpDetail(item)">
						<view class="item-row">
							<text class="item-title">{{ item.name }}</text>
						</view>
						<text class="item-desc">{{handleType(item.type)}}</text>
						<view class="item-row">
							<view class="item-date">
								<!-- 使用期限:asdasd -->
							</view>
							<view class="item-button">{{handleStatus(item.status,item.paystatus)}}</view>
						</view>
					</view>
				</template>
				<template v-if="list.length==0&&!loading">
					<view><u-empty></u-empty></view>
				</template>
			</view>
		</view>

	</view>
</template>
<script setup>
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	import {
		imgUrl
	} from '../../utils/global';
	import {
		useUserStore
	} from '@/store/user';
	import {
		getcxlist,
		equityDetailList
	} from "@/api/travel"
	onLoad(async (options) => {
		// getList()
	})
	onShow(() => {
		getList()
	})
	const loading = ref(false)
	const current = ref(0)
	const list = ref([])
	const handleStatus = (status, paystatus) => {
		switch (Number(status)) {
			case 0:
				return "立即预约";
			case 1:
				return "已预约";
			case 2:
				if (Number(paystatus == 2)) {
					return "已退款";
				} else {
					return "已取消";
				}
			case 3:
				return "已使用";
			default:
				return "获取失败";
		}
	};

	const handleType = (status) => {
		switch (status) {
			case "E0807000001":
				return "休息室服务";
			case "E0807000002":
				return "机场贵宾服务";
			case "E0807000003":
				return "礼宾车接送服务";
			case "E0907003001":
				return "境内机场高铁休息室服务";
			case "E0907003002":
				return "境外机场休息室";
			case "E0907003003":
				return "境内接送机站服务";
			case "E0907003004":
				return "贵宾要客通服务";
			default:
				return "获取失败";
		}
	};
	const jumpDetail = (item) => {
		uni.navigateTo({
			url: "/pages/travel/detail?id=" + item.id
		})
	}
	const serviceList = ref([{
		label: "未预约",
		value: 0
	}, {
		label: "已预约",
		value: 1
	}, {
		label: "已取消",
		value: 2
	}, {
		label: "已使用",
		value: 3
	}, ])
	const changeCurrent = (index) => {
		current.value = index;
		getList()
	};
	const userStore = useUserStore();
	const getList = () => {
		loading.value = true
		getcxlist({
			uid: userStore.userInfo.id,
			status: current.value
		}).then(res => {
			list.value = res[0]
			loading.value = false
		}).catch(err => {
			loading.value = false
		})
	}
</script>

<style scoped lang="scss">
	.container {
		background: #F8F8FA;
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.header-active {
		color: #FF7F36 !important;
		border-bottom: 2px solid #FF7F36 !important;
	}

	.service-header {
		width: 100%;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view {
			flex: 1;
			height: inherit;
			color: #434343;
			font-weight: 400;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2px solid #3333331e;
			box-sizing: border-box;
		}

	}

	.app-title {
		color: #333333;
		font-weight: normal;
		font-size: 32rpx;
		margin: 0 0 30rpx;
	}

	.service-content {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30rpx;

		>view {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: linear-gradient(134deg, #FFFFFF 0%, #FFF7F3 100%);
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 30rpx;
		}

		.content-empty {

			>text {
				color: #434343;
				font-weight: normal;
				font-size: 26rpx;
			}

			.empty-button {
				width: 364rpx;
				height: 60rpx;
				background: linear-gradient(to left, #FF9000 0%, #F54730 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				color: white;
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 60rpx;
			}
		}

		.service-item {
			.item-row {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-title {
					color: #434343;
					font-weight: normal;
					font-size: 26rpx;
				}

				.item-add {
					color: #333333;
					font-weight: 400;
					font-size: 24rpx;
					text-decoration: underline;
				}

				.item-date {
					color: #B6B6B8;
					font-weight: 400;
					font-size: 24rpx;
				}

				.item-button {
					width: 222rpx;
					height: 60rpx;
					// transform: scale(.4);
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					font-weight: 400;
					font-size: 24rpx;
					background: linear-gradient(to left, #FF9000 0%, #F54730 100%);
					border-radius: 43rpx;
				}
			}

			.item-desc {
				color: #B6B6B8;
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 30rpx;
				margin-bottom: 62rpx;
				align-self: flex-start;
			}
		}
	}

	.service-wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 16rpx;


	}
</style>